<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人信息</title>
		<script src="../../js/vue.js"></script>
		<script src="../../js/element.js"></script>
		<script src="../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/element.css" />
		<!-- 基本通用样式 -->
		<link rel="stylesheet" type="text/css" href="../../css/common/iframe.css" />
		<link rel="stylesheet" type="text/css" href="../../css/employeeMenus/employeeInfo.css" />
	</head>
	<body>
		<div id="app">
			<div class="header">
				<i class="el-icon-postcard"></i>
				个人信息
			</div>
			<div class="main">
				<div class="employeeInfoList" :v-model="employeeInfo">
					<!-- <p>个人信息</p> -->
					<el-descriptions :column="1" border>
						<el-descriptions-item label="账号">
							{{employeeInfo.username}}
						</el-descriptions-item>
						<el-descriptions-item label="手机号">{{employeeInfo.phone}}</el-descriptions-item>
						<el-descriptions-item label="电子邮箱">{{employeeInfo.email}}</el-descriptions-item>
						<el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">
							{{employeeInfo.address}}
						</el-descriptions-item>
						<el-descriptions-item label="当前状态" v-if="employeeInfo.status==0">
							<el-tag size="small" type="success">正常</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="当前状态" v-else>
							<el-tag size="small" type="danger">异常</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="角色信息">
							<el-tag size="small" type="success" v-for="item in roleName" style="margin-right: 5px;">
								{{item}}
							</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="权限信息">
							<div class="menuName" v-for="item in menuList">
								<div v-if="item.children.length!=0">
									<el-tag size="small" type="success" style="margin-right: 5px;">{{item.menu}}
									</el-tag>
									<el-tag size="small" v-for="i in item.children">{{i.menu}}</el-tag>
								</div>
								<div v-else>
									<el-tag size="small" type="success" style="margin-right: 5px;">{{item.menu}}
									</el-tag>
								</div>
							</div>
						</el-descriptions-item>
						<el-descriptions-item label="备注">
							{{employeeInfo.remarks}}
						</el-descriptions-item>
					</el-descriptions>
					<el-button type="primary" round size="mini" @click="updateEnable">点击修改</el-button>
				</div>
				<div class="updateEmployeeInfo">
					<!-- <p>修改信息</p> -->
					<el-form ref="form" :model="employeeInfo" label-width="80px" :rules="rules" status-icon>
						<el-form-item label="账号" prop="username">
							<el-input v-model="employeeInfo.username" :disabled="true"></el-input>
						</el-form-item>
						<el-form-item label="手机号" prop="phone">
							<el-input v-model="employeeInfo.phone"></el-input>
						</el-form-item>
						<el-form-item label="电子邮箱" prop="email">
							<el-input v-model="employeeInfo.email"></el-input>
						</el-form-item>
						<el-form-item label="联系地址" prop="address">
							<el-input v-model="employeeInfo.address"></el-input>
						</el-form-item>
						<el-form-item label="备注" prop="remarks">
							<el-input type="textarea" :rows="4" v-model="employeeInfo.remarks"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" round size="mini" @click="onSubmit">保存</el-button>
							<el-button round size="mini" @click="updateEnable">取消</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				// 自定义手机号的验证规则
				const checkPhone = (rule, value, callback) => {
					if (value) {
						const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
						if (reg.test(value)) {
							callback()
						} else {
							return callback(new Error('请输入正确的电话'))
						}
					}
				};
				return {
					// employeeInfo:''
					employeeInfo: {
						id: ''
					}, //用户信息
					roleName: '', //员工角色名称
					menuList: '', //员工权限信息
					// 修改表单验证规则
					rules: {
						phone: [{
							validator: checkPhone,
							trigger: 'blur'
						}]
					}
				}
			},
			mounted() { // 生命周期函数
				this.getEmployeeInfo(),
					this.getMenuList(),
					this.getRoleName()
			},
			methods: {
				// 获取用户信息
				getEmployeeInfo() {
					// 获取登录用户 token
					let jwtToken = localStorage.getItem('token')
					axios({
						async: false,
						method: 'get',
						url: 'http://localhost:8080/employee/info',
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.employeeInfo = res.data.data.employeeInfo
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 根据员工 id 获取员工 角色名称
				getRoleName() {
					console.log(this.employeeInfo.id)
					// 获取登录用户 token
					let jwtToken = localStorage.getItem('token')
					axios({
						async: false,
						method: 'get',
						url: 'http://localhost:8080/employee/getRoleName',
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.roleName = res.data.data.roleName
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 权限信息获取
				getMenuList() {
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'get',
						url: 'http://localhost:8080/employee/menu',
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.menuList = res.data.data.menuList
						} else { //权限信息获取失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 修改用户菜单信息
				updateEnable() {
					const updateEmployeeInfo = document.querySelector('.updateEmployeeInfo');
					//切换类：active，存在删除，不存在，就添加;
					updateEmployeeInfo.classList.toggle('active');
				},
				// 提交员工修改数据
				onSubmit() {
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'put',
						url: 'http://localhost:8080/employee/update',
						data: {
							id: this.employeeInfo.id,
							username: this.employeeInfo.username.trim(),
							phone: this.employeeInfo.phone.trim(),
							email: this.employeeInfo.email.trim(),
							remarks: this.employeeInfo.remarks.trim()
						},
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							// 显示修改成功信息
							this.$message.success(res.data.message)
						} else { //修改失败
							this.$message.error(res.data.message)
						}
					})
				}
			}
		})
	</script>
</html>
